<template>
  <div class="page-user-login">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="登录"
    ></van-nav-bar>
    <van-form >
      <van-field
        @blur="validMobile"
        v-model="ruleForm.mobile"
        required
        mobile="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :error-message="erropMsg.mobile"
      />
      <van-field
        @blur="validCode"
        v-model="ruleForm.code"
        required
        type="password"
        code="验证码"
        label="验证码"
        placeholder="请输入验证码"
        :error-message="erropMsg.code"
      >
        <template #button>
          <van-button size="small" type="primary" style="background-color: #d43d3d; border: #d43d3d">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" class="Btn" @click="onSubmit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// 导入登录后台接口的方法
import { login } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  name: 'user-chat',
  data () {
    return {
      // 表单数据
      ruleForm: {
        mobile: '13911111111', // 手机号
        code: '246810' // 验证码
      },
      // 表单输入错误提示
      erropMsg: {
        mobile: '', // 手机号错误提示
        code: '' // 验证码错误提示
      }
    }
  },
  methods: {
    // 调用vuex中方法
    ...mapMutations(['setToken']),
    // 定义手机号输入框的失焦事件的验证规则
    validMobile () {
      const value = this.ruleForm.mobile
      // 判断当前的手机号输入框的值，并且做验证规则
      if (!value) {
        this.erropMsg.mobile = '请输入手机号'
        // 定义手机号验证规则
      } else if (!/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)) {
        this.erropMsg.mobile = '请输入正确格式的手机号'
      } else {
        this.erropMsg.mobile = ''
      }
    },
    // 定义验证码输入框的失焦事件的验证规则
    validCode () {
      const value = this.ruleForm.code
      // 判断当前的手机号输入框的值，并且做验证规则
      if (!value) {
        this.erropMsg.code = '请输入手机号'
        // 定义手机号验证规则
      } else if (!/^\d{6}$/.test(value)) {
        this.erropMsg.code = '请输入正确格式的手机号'
      } else {
        this.erropMsg.code = ''
      }
    },
    // 表单提交事件
    async onSubmit () {
      // 最后表单提交在做表单的整体验证
      // 调用手机号和验证码输入框的验证规则
      this.validMobile()
      this.validCode()
      // 判断如果任何一个有错误。直接return false
      if (this.erropMsg.mobile || this.erropMsg.code) return false
      // console.log('提交了吗')
      // 登录逻辑，调用接口的方法
      // 向后端发送数据请求，执行登录逻辑
      try {
        const { data } = await login(this.ruleForm)
        // 将token存储到vuex中
        // console.log(data)
        this.setToken(data)
        // 登录成功提示
        this.$toast.success('登录成功！')
        // 登陆成功之后，跳转页面
        const { redirectUrl } = this.$route.query // 上次访问的页面
        // 判断如果有上次访问的页面直接跳转到上次的页面，没有跳到首页
        if (redirectUrl) {
          this.$router.replace(redirectUrl)
        } else {
          this.$router.replace('/')
        }
      } catch (error) {
        this.$toast.fail('手机号或验证码错误！')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.Btn {
  background-color: #d43d3d;
  border: #d43d3d;
}
</style>
